<template>
  <div class="login-wrapper">
    <el-container>
      <el-header>
          <img src="../assets/img/logo.6f4321c1.png" alt="" id="logo">
      </el-header>
      <el-main>
        <el-row justify="center" type="flex">
          <el-col>
            <div class="login-box">
              <h2>用户登录</h2>
              <el-form
                status-icon
                ref="ruleForm"
                class="demo-ruleForm"
                :model="ruleForm"
                :rules="rules"
              >
                <el-form-item prop="username">
                  <el-input
                    type="text"
                    v-model="ruleForm.username"
                    autocomplete="off"
                    placeholder="请输入用户名"
                  ><i slot="prefix" class="el-input__icon el-icon-user"></i></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                  <el-input
                    type="password"
                    v-model="ruleForm.password"
                    autocomplete="off"
                    placeholder="请输入密码"
                  ><i slot="prefix" class="el-input__icon el-icon-lock"></i></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')"
                    >提交</el-button>
                  
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {mapActions} from "vuex"

export default {
  data() {
      return {
        ruleForm: {
          username:"",
          password: '',
        },
        rules: {
          username: [
            { trigger: 'blur', message: '请输入用户名',required:true}
          ],
          password: [
            {trigger: 'blur', message: '请输入密码',required:true},
            { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      ...mapActions(["getLogin"]),
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
          if (valid) {
            this.getLogin(this.ruleForm)
            console.log(this.ruleForm);
           setTimeout(()=>{
             localStorage.setItem('token',this.$store.state.userInfo.token)
             if(this.$store.state.userInfo.status=='1'){
               this.$message.error('用户名或密码错误！')
               return
             }else{
               console.log(this.$store.state.userInfo);
               localStorage.setItem('name',this.$store.state.userInfo.data.username)
               this.$router.replace("/home")
             }
           },500)
            
          } else {
            this.$message.error("请输入正确的用户名和密码！")
          }
          loading.close();
        });
      },
    }
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.login-wrapper .el-container {
  height: 100vh;
}
.login-wrapper .el-header{
  background-color: hsla(0,0%,100%,.2);
  text-align: center;
}
.login-wrapper .el-button{
  width: 100%;
  height: 40px;
}
.login-wrapper .el-main{
  width: 400px;
  height: 300px;
  margin:50px auto 0;
}
#logo{
  width: 300px;
  height: 100%;
}
.login-wrapper {
  width: 100%;
  height: 100%;
  background: url("../assets/img/bcphoto.407054bc.jpg") no-repeat;
  background-size: 100% 100%;
}
.login-box {
  padding: 10px 40px;
  background-color: hsla(0, 0%, 100%, 0.5);
}
.login-box h2 {
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  margin-bottom: 20px;
}
</style>
